<template>
  <div class="material-volatility-container">
    <!-- 顶部条件筛选 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <AssociativeSelectGroup
            :map="selectMap"
            v-model="defaultTime"
            :activeDate="activeDate"
            @conditionChange="selectGroupChange($event)"
          ></AssociativeSelectGroup>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getData()"> 查询 </a-button>
          <a-button type="default" @click="exportData()"> 导出 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="material-volatility-body">
      <router-view ref="routerView"></router-view>
    </div>
  </div>
</template>

<script>
import AssociativeSelectGroup from "@/components/wisdom-beam/cement-app/AssociativeSelectGroup";
import { exportMaterialTableData } from "@/api/wisdom-beam/productionManage-app";
import { downLoadFileByArraybuffer } from "@/utils";
export default {
  name: "materialVolatility",
  components: {
    AssociativeSelectGroup,
  },
  data() {
    return {
      dateFormat: "YYYY-MM-DD HH:mm:ss",
      dataType: "statistical",
      manual: true,
      defaultTime: [],
      projectName: "",
      strengthGrade: "",
      /////////////////
      activeDate: [],
      conditionsData: {},
      clickFlag: false,
      selectMap: [
        //标段
        {
          type: "block",
          mode: "default",
          placeholder: "请选择标段",
        },
        //拌和站
        {
          type: "mixin",
          mode: "default",
          placeholder: "请选择拌和站",
        },
        //工程名称
        {
          type: "engineerName",
          mode: "default",
          placeholder: "请选择工程名称",
        },
        //浇筑部位
        {
          type: "placePart",
          mode: "default",
          placeholder: "请选择浇筑部位",
        },
        //强度等级
        {
          type: "strength",
          mode: "default",
          placeholder: "请选择强度等级",
        },
        {
          type: "calendar",
        },
      ],
    };
  },
  watch: {
    $route(to) {
      let { path } = to;
      let type = "";
      switch (path) {
        case "/nebula/wisdom-beam-app/materialFluctuations/dataStatistical":
          type = "statistical";
          break;

        case "/nebula/wisdom-beam-app/materialFluctuations/dataReport":
          type = "report";
          break;

        default:
          break;
      }
      !this.clickFlag && this.checkDataType();
      this.clickFlag = false;
      this.dataType = type;
    },
  },
  mounted() {
    let { name } = this.$route;
    switch (name) {
      case "materialDataStatic":
        this.dataType = "statistical";
        break;

      case "materialDataReport":
        this.dataType = "report";
        break;

      default:
        this.dataType = "statistical";
        break;
    }
  },
  methods: {
    selectGroupChange(data) {
      this.dealConditionsData(data);
      this.getData();
    },

    //处理搜索区域选中值
    dealConditionsData(data = {}) {
      Object.keys(data).forEach((key) => {
        if (!data[key]) {
          this.conditionsData[key] = "";
        } else if (Array.isArray(data[key])) {
          this.conditionsData[key] = data[key]
            .map((v) => v.key)
            .filter((v) => v)
            .toString();
        } else if (
          Object.prototype.toString.call(data[key]) === "[object Object]"
        ) {
          this.conditionsData[key] = data[key].key;
        } else {
          this.conditionsData[key] = "";
        }
      });
    },

    //查询
    getData() {
      this.$nextTick((_) => {
        switch (this.dataType) {
          case "statistical":
            this.$refs["routerView"].getAllData();
            break;

          case "report":
            this.$refs["routerView"].getData();
            break;

          default:
            break;
        }
      });
    },

    //导出数据
    exportData() {
      let {
        conditionsData: { block, engineerName, mixin, placePart, strength },
        defaultTime,
      } = this;
      exportMaterialTableData({
        secCode: block,
        equCode: mixin,
        projectName: engineerName,
        placePart: placePart,
        strengthGrade: strength,
        startTime: defaultTime[0] || "",
        endTime: defaultTime[1] || "",
      }).then((data) => {
        downLoadFileByArraybuffer(data, "材料波动");
      });
    },

    //类型切换
    checkDataType(type) {
      this.clickFlag = true;
      switch (type) {
        case "statistical":
          this.$router.push({
            path: "/nebula/wisdom-beam-app/materialFluctuations/dataStatistical",
          });
          break;

        case "report":
          this.$router.push({
            path: "/nebula/wisdom-beam-app/materialFluctuations/dataReport",
            query: {
              menuCode: "SNXT_CLBD",
            },
          });
          break;
        default:
          break;
      }
      this.$nextTick((_) => {
        this.getData();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.material-volatility-container {
  padding: 0 0 10px 10px;
  height: 100%;
  .flex();
  flex-direction: column;
  .material-volatility-body {
    flex: 1;
    overflow: hidden;
    padding: 10px 0 0 0;
  }
}
</style>
